function DdrawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable(),
		data2 = new google.visualization.DataTable(),
chart = null, chart2 = null;
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Manager');
  data.addColumn('string', 'ToolTip');
  
  
  var cache = {};
  var opts;
  var nodeMouseOver;
  
  $.ajax({
	url:"../rest/chart/1",
	type: "get",
	dataType:"json",
	
	beforeSend: function(){
	//$('#chart_div').addClass("loading");
	$('#loader').show();
},

	complete: function(xhr){	
		if(xhr.readyState==4 && xhr.status==200){ // si la llamada fue con exito
			//$('#chart_div').removeClass("loading");
			$('#loader').hide();
			var json = eval("(" + xhr.responseText + ")"); //evaluar como un objeto json
			data.addRows(json);
			cache.main = json;
			
			chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
			opts = {
					'allowHtml': true
			}
			
			chart.draw(data, opts);
			google.visualization.events.addListener(chart , 'select', selectHandler); //cuando hago click que se ejecute el selectHandler
			google.visualization.events.addListener(chart , 'onmouseover', mouseOverHandler);
		}
	}
  });

  function mouseOverHandler(e){
		chart.setSelection([e]);
		nodeMouseOver = data.getValue(chart.getSelection()[0].row, 0); //id nodo sobre el que se hizo mouseover		
		//console.log(nodeMouseOver);
		showInfo(e);
	};
  
  function selectHandler(e) {
					//data.getValue(fil,col);
	  var manager = data.getValue(chart.getSelection()[0].row, 0)
	  //console.log(data.getValue(chart.getSelection()[0].row, 0));
		
	  // Create and populate the data table.
	  data2 = new google.visualization.DataTable();
	  data2.addColumn('string', 'Name');
	  data2.addColumn('string', 'Manager');
	  data2.addColumn('string', 'ToolTip');
	  
	  var nodokey = manager.substring(0,8); //key of the null node, nodokey constains "nodonull"
	  
	  if((manager!="cat1")&(nodokey!="nodonull")){
	getManagerData(manager, function(json){
		
			data2.addRows(json);
			
			chart2 = new google.visualization.OrgChart(document.getElementById('chart_div'));
			//chart2.draw(data2, {allowHtml: true, nodeClass: 'fondo'});
			chart2.draw(data2, opts);

			google.visualization.events.addListener(chart2 , 'select', backHandler);
	});
	 }
  };

function backHandler(e){
	var manager = data2.getValue(chart2.getSelection()[0].row, 0);
	//console.log("back " + manager);
	switch(manager){
		case "cat11":
		case "cat12":
		case "cat13":
		case "cat14":
			getManagerData(manager, function(){
				chart.draw(data, opts);
			});
			break;
	}
};

function getManagerData (manager, callback){
	if(!cache[manager] ){
		$.ajax({
		url: manager+".json",
		type: "post",
		dataType:"json",
		beforeSend: function(){
			//$('#chart_div').addClass("loading");
			$('#loader').show();
		},
		complete: function(xhr){
			if(xhr.readyState==4 && xhr.status==200){
				var json = eval("(" + xhr.responseText + ")");
				callback(json);
				cache[manager] = json;
				//$('#chart_div').removeClass("loading");
				$('#loader').hide();
			}
		}
	  });
	}else{
		callback(cache[manager]);
	}

};
  
//SETTING UP THE POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}

function showInfo(e){
	//LOADING POPUP
	//Click the + event!
	
	$('.info').click(function(){		
		
		if(nodeMouseOver=="cat1"){
			console.log("nodo 1");
		}
			//centering with css
			centerPopup();
			//load popup
			loadPopup();
		
		
	});
				
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

};
  
};